// @import './base.less';

html {
  /* 让滚动条丝滑的滚动 */
  scroll-behavior: smooth;
}

// 1、顶部导航栏模块 begin
.top {
  width: 100%;
  background-color: rgba(0, 0, 0, .7);

  .desktop {
    display: flex;
    justify-content: space-between;
    width: 83.3333vw;
    height: 40px;
    margin: 0 auto;
    padding: 0 2.0833vw;
    font-size: .8333vw;
    line-height: 40px;
    color: #fff;

    // 左侧模块，为了使用flex布局
    .desktop_left {
      display: flex;
      justify-content: start;

      // logo模块
      .desktop_logo {
        // position: relative;
        display: inline-block;
        height: 40px;
        width: 3.22vw;
        margin-right: 1.5625vw;
        background-image: url(../uplods/logobefor.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: .0521vw;
        font-size: .8333vw;

        &:hover {
          color: #00aeff;
          // background-position: -18px -119px;
          background-size: contain;
          background-image: url(../uplods/logafter.png);

        }
      }

      // 左侧菜单栏模块
      .desktop_items {
        width: 20.4167vw;
        height: 2.0833vw;
      }
    }

    // 左右菜单栏共用样式
    ul {
      display: flex;

      li {
        a {
          margin-right: 1.5625vw;
          height: 2.0833vw;
          line-height: 2.0833vw;
          color: rgba(255, 255, 255, .7);
          font-size: .7813vw;
          white-space: nowrap;
          transition: color .2s, background-color .2s, border-color .2s;

          &:hover {
            color: #fff;
          }

          // 当前页面添加active类
          &.active {
            color: #fff;
            text-shadow: 0 0 15px #fff, 0 0 30px rgb(255 255 255 / 30%);
          }

          // 下拉箭头
          .dropdown {
            display: inline-block;
            width: .7292vw;
            height: .3646vw;
            margin-left: 2px;
            background-image: url(https://blz.nosdn.127.net/1/fsbnet/icon-sprite.png);
            background-position: -147px -131px;
            background-repeat: no-repeat;
            color: rgba(255, 255, 255, .5);
            transition: color .2s, background-color .2s, border-color .2s;
          }
        }
      }
    }

    // 右侧菜单栏模块
    .desktop_profileItems {
      ul {
        li {
          a {
            margin-right: 0;
            margin-left: 1.5625vw;

            // 未成年人监护图标
            span {
              position: relative;
              background: url(https://blz.nosdn.127.net/1/common/juveniles.png) no-repeat 0 0;
              background-size: 100% auto;
              width: .7292vw;
              height: .9375vw;
              display: inline-block;
              top: 4px;
            }
          }

          &:first-child {
            a {
              margin-left: 0;
              margin-right: 2.6042vw;
            }
          }
        }
      }
    }
  }
}

// 1、顶部导航栏模块 end


// 2、固定定位导航栏模块 begin
.menu {
  display: flex;
  justify-content: space-between;
  height: 3.125vw;
  display: flex;
  width: 96%;
  position: fixed;
  top: 50px;
  // 水平居中
  left: 50%;
  transform: translate(-50%);
  border-radius: .4167vw;
  align-items: center;
  padding: 6px;
  background-color: rgba(229, 235, 244, .8);
  z-index: 20;

  // 白色圆角方框
  &::before {
    content: "";
    position: absolute;
    display: block;
    z-index: 1;
    left: 0;
    top: 0;
    width: 6.25vw;
    height: 100%;
    background-color: #fff;
    border-top-left-radius: .4167vw;
    border-bottom-left-radius: .4167vw;
  }

  // 模糊背景色
  &::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(229, 235, 244, .8);
    backdrop-filter: blur(1.0417vw);
    border-radius: .4167vw;
    z-index: -1;
  }

  // 左侧模块，为了使用flex布局
  .menu_left {
    display: flex;
    justify-content: start;
    z-index: 2;

    // logo模块
    .menu_logo {
      width: 5.9375vw;
      height: 2.0833vw;
      margin-top: .2604vw;
      box-sizing: content-box;
      background-image: url(../uplods/logobig.png);
      background-repeat: no-repeat;
      background-size: contain;
      // background-position: -9px -16px;
      margin-left: .5208vw;
    }

    // 游戏logo，字体图标
    .menu_pic {
      display: block;
      margin: 0 .625vw;
      width: 2.5vw;
      height: 2.5vw;
      line-height: 2.5vw;

      .iconfont {
        font-size: 2.3438vw;
        color: #fff;
      }
    }

    ul {
      display: flex;
      align-items: center;

      li {
        position: relative;
        height: 2.0833vw;
        padding: 0 .625vw;
        margin-right: .5208vw;
        border-radius: .4167vw;
        line-height: 2.0833vw;
        font-size: .8854vw;
        color: #000;
        font-weight: 700;
        cursor: pointer;

        &:hover {
          background-color: rgba(0, 0, 0, .1);

          .dropdown_menu {
            visibility: visible;
            opacity: 1;
          }
        }

        .iconfont {
          margin-left: 4px;
          color: rgba(0, 0, 0, .3);
          font-size: .5208vw;
        }

        // 隐藏的悬浮下拉列表
        .dropdown_menu {
          position: absolute;
          top: 140%;
          left: -115%;
          opacity: 0;
          visibility: hidden;
          min-width: 13.0208vw;
          padding: .625vw;
          background-color: #fff;
          border-radius: .4167vw;
          transition: all 0.4s;

          // 隐藏的悬浮下拉列表的三角形
          .dropdown_menu_arrow {
            position: absolute;
            top: -1.0417vw;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: .5208vw solid transparent;
            border-bottom-color: #fff;
          }

          // 隐藏的悬浮下拉列表的内容
          .dropdown_menu_content {
            a {
              display: block;
              padding: 0 .625vw;
              border-radius: .4167vw;
              color: #000;

              &:hover {
                background-color: #ebebeb;
              }
            }

            .iconfont {
              font-size: .625vw;
              color: rgba(0, 0, 0, .3);
            }

            dl {
              position: absolute;
              top: 100%;
              left: 0;
              width: 100%;
              padding: 0 .625vw .625vw .625vw;
              background-color: #f2f2f2;
              border-bottom-left-radius: .4167vw;
              border-bottom-right-radius: .4167vw;

              dt,
              dd {
                padding: 0 .625vw;
              }

              dt {
                font-size: .7292vw;
                color: rgba(0, 0, 0, .5);
                cursor: default;
              }

              dd {
                border-radius: .4167vw;
                cursor: pointer;

                &:hover {
                  background-color: #dfdfdf;
                }

                p {
                  padding: 0 .625vw;
                  font-size: .7292vw;
                  color: rgba(0, 0, 0, .5);
                  line-height: 1.2;
                }
              }
            }
          }
        }

        // 最后一个隐藏下拉列表中的dl与上方有一个距离
        &:last-child .dropdown_menu_content {
          dl {
            padding-top: 1.0417vw;
          }
        }

        // 后两个隐藏下拉列表的样式与前面的不同，需要单独修改
        &:nth-child(n+6) .dropdown_menu {
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
    }
  }

  // 下载按钮
  .menu_download {
    a {
      display: block;
      background-color: #f06414;
      border-radius: .4167vw;
      margin-left: .625vw;
      padding: 0 .625vw;
      min-height: 2.0833vw;
      font-weight: 700;
      font-size: .8854vw;
      line-height: 2.0833vw;
      color: #fff;

      &:hover {
        background-color: #f1742b;
      }
    }
  }
}

// 2、固定定位导航栏模块 end

// 3、底部模块制作 begin
footer {
  background-color: #202020;

  // 推广模块
  .socialFooter {
    color: #fff;
    background: url(https://blz.nosdn.127.net/1/tm/overwatch/SocialFooter-new-bg.jpg) no-repeat 50% 0;
    background-size: 100% 100%;
    padding: 2.6563vw 0 3.125vw;
    text-align: center;
    position: relative;
    z-index: 12;

    .txt {
      font-size: 1.1979vw;
      font-weight: 700;
      padding-bottom: 1.5625vw;
      line-height: 1.6;
    }

    // 推广模块-图标列表
    .list {
      display: flex;
      justify-content: center;
      align-items: center;

      li {
        position: relative;
        margin: 0 .5729vw;
        border: 2px solid #818590;
        border-radius: 50%;
        height: 3.75vw;
        width: 3.75vw;
        padding: .2604vw;

        a {
          width: 100%;
          height: 100%;
          background: #bdbfc6;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          .iconfont {
            width: 1.5625vw;
            height: 1.5625vw;
            display: inline-block;
            fill: currentColor;
            color: #1e2338;
            font-size: 1.4583vw;
            line-height: 1.5625vw;
          }

          // 图标列表隐藏的悬浮图片
          .img {
            top: -8.3333vw;
            left: 50%;
            margin-left: -3.9063vw;
            width: 7.8125vw;
            height: 7.8125vw;
            border: 2px solid #f06414;
            padding: 4px;
            position: absolute;
            border-radius: .2604vw;
            max-width: 7.8125vw;
            visibility: hidden;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .douyin-img {
            width: 13.0208vw;
            height: auto;
            top: -19.5313vw;
            max-width: inherit;
            margin-left: -6.5104vw;
          }
        }

        .xiaohongshu {
          background: url(../images/小红书.png) #bdbfc6 no-repeat 50% 50% /90%;
        }

        &:nth-child(2) .iconfont {
          font-size: 1.8229vw;
        }

        &:nth-child(3) .iconfont {
          margin-left: -0.5208vw;
          font-size: 1.0417vw;
        }

        // 鼠标悬浮时改变小li边框颜色，a的背景色
        &:hover {
          border-color: #f06414;

          a {
            background: #f06414;

            .img {
              visibility: visible;
            }

            &.xiaohongshu {
              // 只改变背景颜色会覆盖背景图片
              background: url(../images/小红书.png) #f06414 no-repeat 50% 50% /90%;
            }
          }
        }
      }
    }
  }

  // 版权模块
  .footer {
    height: 20.0521vw;

    a {
      padding-top: .2604vw;
      color: #fff;
    }

    // 版权模块-商业合作模块
    .footer_business {
      padding-top: 2.0833vw;
      width: 52.0833vw;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
      z-index: 100;
      font-size: .7292vw;

      ul {
        font-size: .7292vw;
        line-height: 1.6;

        li {
          float: left;
          margin-right: 1.9271vw;
          vertical-align: middle;
          cursor: pointer;

          .icon {
            display: inline-block;
            width: 1.25vw;
            height: 1.25vw;
            top: -2px;

            background-size: 100% 100%;
            background-repeat: no-repeat;
            vertical-align: inherit;
            margin-right: .5208vw;
          }

          .icon1 {
            background-image: url(../images/common_sprite_icon1.png);
          }

          .icon2 {
            background-image: url(../images/common_sprite_icon2.png);
          }

          .icon3 {
            background-image: url(../images/common_sprite_icon3.png);
          }
        }
      }
    }

    // 版权模块-版权信息模块
    .cprt {
      padding-top: 2.6042vw;
      border-bottom: 1px solid rgba(255, 255, 255, .15);
      overflow: hidden;
      padding-bottom: 1.0417vw;
      text-align: left;
      width: 52.0833vw;
      margin: 0 auto;

      .footer_logo {
        position: relative;
        top: 4px;
        width: 6.9792vw;
        background: url(https://overwatch.nosdn.127.net/1/images/layout/blizzard.png) no-repeat 0 0;
        background-size: 100% auto;
        display: inline-block;
        width: 6.0938vw;
        height: 4.1667vw;
        vertical-align: top;
        margin: 0;
        margin-right: 1.3021vw;
      }

      .footer_origin {
        position: relative;
        top: 2.0313vw;
        width: 9.7396vw;
        display: inline-block;
        background: url(https://blz.nosdn.127.net/1/footer/logo_ne.png) no-repeat 0 0;
        width: 8.6979vw;
        background-size: 100% auto;
        height: 1.9792vw;
        vertical-align: top;
        margin: 0;
      }

      .footer_info {
        position: relative;
        width: 32.8125vw;
        float: right;
        text-align: left;
        padding: 0 0 0 3.2292vw;
        vertical-align: middle;
        box-sizing: border-box;

        ul {
          margin: 0 0 0 -0.5208vw;
          padding: 0 0 5px;

          li {
            float: left;
            color: #ccc;

            a {
              color: #ccc;
              padding: 0 .5208vw;
              font-size: .7292vw;
            }
          }
        }

        p {
          line-height: 1.0417vw;
          vertical-align: top;
          font-size: .625vw;
          margin: 0;
          color: rgba(255, 255, 255, .5);

          a {
            margin-right: 5px;
            color: rgba(255, 255, 255, .5);

            &:hover {
              color: #fff;
            }
          }

          &:last-child {
            padding: .4167vw 0;
            /* 先强制一行内显示文本 */
            white-space: nowrap;
            /* 超出的部分隐藏 */
            overflow: hidden;
            /* 文字超出的部分用省略号替代 */
            text-overflow: ellipsis;
          }
        }
      }
    }

    // 版权模块-脚注
    .footer_tips {
      color: rgba(255, 255, 255, .3);
      text-align: center;
      clear: both;
      font-size: .625vw;
      line-height: 1.0417vw;
    }
  }
}

// 4、回顶部的悬浮箭头 begin
.icon-xiangshangjiantou {
  width: 1.5625vw;
  height: 1.5625vw;
  background-color: rgba(0, 0, 0, .2);
  position: fixed;
  right: 1.0417vw;
  bottom: 1.0417vw;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  line-height: 1.5625vw;
  color: #fff;
  font-size: 1.3021vw;
  z-index: 999;
}

// 4、回顶部的悬浮箭头 end